<template>
  <!-- 全部车源 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="31"></ceList>
      <div class="houselist">
        <div class="h1">
          <div class="one-tab no-padding">
            <div class="one-tab-left">
              <div class="one-tab-item " :class="houseindex == 1 ? 'active' : ''" @click="houseClick(1)">
                全部
              </div>
              <div class="one-tab-item " :class="houseindex == 2 ? 'active' : ''" @click="houseClick(2)">
                新车
              </div>
              <div class="one-tab-item " :class="houseindex == 3 ? 'active' : ''" @click="houseClick(3)">
                二手车
              </div>
            </div>
            <div class="one-tab-right">
              <template v-if="compilestate">
                <div class="one-tab-right-btn" @click="housecompile(false)">
                  完成
                </div>
              </template>
              <template v-else>
                <div class="one-tab-right-btn" @click="housecompile(true)">
                  管理
                </div>
              </template>
            </div>
          </div>
          <!-- <div class="title">
            <div
              :class="houseindex == 1 ? 'ttext xttext' : 'ttext'"
              @click="houseClick(1)"
            >
              全部
            </div>
            <div
              :class="houseindex == 3 ? 'ttext xttext' : 'ttext'"
              @click="houseClick(3)"
            >
              到店新车
            </div>
            <div
              :class="houseindex == 2 ? 'ttext xttext' : 'ttext'"
              @click="houseClick(2)"
            >
              二手车
            </div>
            <div style="flex-grow: 1; display: flex; justify-content: flex-end">
              <div
                v-if="!compilestate"
                style="
                                font-size: 18px;
                                color: #333333;
                                padding: 5px 14px;
                                width: 40px;
                                font-weight: 400;
                                background-color: #e0e0e0;
                                border-radius: 22px;
                                cursor: pointer;
                                "
                @click="housecompile(true)"
              >
                管理
              </div>
              <div
                v-else
                style="
                                font-size: 18px;
                                color: #333333;
                                padding: 5px 14px;
                                width: 40px;
                                font-weight: 400;
                                background-color: #e0e0e0;
                                border-radius: 22px;
                                cursor: pointer;
                                "
                @click="housecompile(false)"
              >
                完成
              </div>
            </div>
          </div> -->
          <div class="house" style="position:relative">
            <div class="houseview" v-for="(item, index) in houseList" :key="index">
              <template v-if="compilestate">
                <div v-if="!item.choose"
                  style="font-size: 50px;line-height: 154px;color: #d1d1d1;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)">
                  ○
                </div>
                <p v-else class="el-icon-success" style="
                                    font-size: 30px;
                                    line-height: 154px;
                                    color: #64b6a8;
                                    margin-right: 10px;
                                    cursor: pointer;
                                " @click="choosehouse(item.id)"></p>
              </template>

              <bbcz-item :item="item" :mwidth="490" @details="details" @toAgent="toAgent" @shopdetails="shopdetails"
                :key="index"></bbcz-item>
            </div>
            <div class="li" v-if="housetotal == 0" style="width: 100%; height: 400px">
              <el-empty description="还没有在售车源" v-if="houseindex == 1"></el-empty>
              <el-empty description="还没有在售到店新车" v-if="houseindex == 2"></el-empty>
              <el-empty description="还没有在售二手车" v-if="houseindex == 3"></el-empty>
            </div>
            <el-pagination @current-change="houseCurrentChange" background layout="prev, pager, next" :total="housetotal"
              :page-size="housepage.pageSize" :current-page="housepage.PageNo"
              style="text-align: center;bottom: 30px;position: absolute;left: 50%;transform: translateX(-50%);"></el-pagination>
          </div>
          <div v-if="compilestate" style="
                        width: 100%;
                        height:72px;
                        display: flex;
                        justify-content: space-between;
                        padding: 0 39px;
                        box-sizing: border-box;
                        align-items: center;
                        font-size: 20px;
                        color: #333333;
                        ">
            <div></div>
            <el-button type="primary" @click="shangjiaC">申领车源</el-button>
          </div>
        </div>
      </div>
    </div>
    <floor></floor>
  </div>
</template>
<script>
import floor from "../../../components/floor";
import heads from "../../../components/head";
import ceList from "../../../components/ceList.vue";
import titlesearch from "../../../components/titlesearch.vue";
import BbczItem from "../../index/comp/bbcz-item.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
    BbczItem
  },
  data() {
    return {
      compilestate: false,
      housevalue: "",
      housevalue2: "",
      imageUrl: "",
      input: "",
      user: {},
      loginstate: false,
      userdata: {},
      housepage: {
        pageSize: 999,
        pageNo: 1,
        storeId: ""
      },
      houseList: [],
      housetotal: 0,
      houseindex: 1,
      xzList: [],
      day: "",
      oldpwd: "",
      onepwd: "",
      twopwd: "",
      imgurl: this.$img,
      mainStore: ""
    };
  },
  created() {
    this.getUser();

    this.checkLogin(false, this.getMoreData);
  },
  methods: {
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        this.$router.push("/");
      }
    },
    checkLogin(slience = false, callback) {
      if (!this.loginstate) {
        if (!slience) {
          this.$message({
            message: "请先登录！",
            type: "error",
            offset: 120,
            duration: 2000
          });
        }
        return false;
      }
      callback && callback();
      return true;
    },
    // 获取车源
    getCy() {
      if (this.housepage.storeId == "") {
        this.housepage.storeId = JSON.parse(
          localStorage.getItem("userInfo")
        ).shopId;
        // this.housepage.storeId = 5
      }

      this.$getHttp(
        "/api/mobile/vehicleOwner/getAllVehicleResources",
        this.housepage
      ).then(res => {
        res.vehicleInformation.pageList.forEach(v => {
          v.choose = false;
        });
        this.houseList = res.vehicleInformation.pageList;
        this.housetotal = res.vehicleInformation.pageCount;
      });
    },
    getMoreData() {
      // 1    3    2
      // 全部 新车  二手车
      if (this.houseindex == 1) {
        // this.submitProblem();
      } else if (this.houseindex == 2) {
        // this.getMyReportRecord();
      } else if (this.houseindex == 3) {
        // this.getMyReportRecord();
      }
      this.getCy();
    },
    shangjiaC(id) {
      // var ids = "";
      // this.houseList.forEach((e) => {
      //   if (e.choose) {
      //     ids += e.id + ",";
      //   }
      // });
      // console.log(ids);
      // var reg = /,$/gi;
      // ids = ids.replace(reg, "");
      var targetArr = this.houseList
        .filter(item => item.choose)
        .map(item => item.id);
      if (targetArr.length == 0) {
        this.$message({
          message: "请先选择车源！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      this.ids = targetArr;
      return;
      //  暂无接口
      this.$postHttp("/mob/user/copyHouseInfo", {
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        ids: this.ids.join(",")
      }).then(res => {
        if (res.code == 200) {
          this.compilestate = false;
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          setTimeout(() => {
            this.$router.push({
              path: "/my/bbcz/wdRelease"
            });
          }, 500);
        }
      });
    },
    getHouseInfo() {
      this.$getHttp("/mob/home/getAllHouseInfo", this.housepage).then(data => {
        if (data.code == 200) {
          data.list.forEach(e => {
            e.choose = false;
            if (e.house_image) {
              e.house_image = this.$img + e.house_image.split("|")[0];
            }
            if (e.hasOwnProperty("FLOOR")) {
              if (e.FLOOR.indexOf("|") == -1) {
                e.foors = "";
              } else {
                e.foors =
                  e.FLOOR.split("|")[0] +
                  "层/" +
                  "共" +
                  e.FLOOR.split("|")[1] +
                  "层";
              }
            }
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });
          this.houseList = data.list;
          this.houseList.push({ id: 1 });
          this.housetotal = data.count + 1;
        }
      });
    },
    details(item) {
      this.openUrl({
        path: "/index/newSourceDetails",
        query: {
          id: item.id
        }
      });
    },
    updata(type) {
      switch (type) {
        case 1:
          this.updateUser({
            id: this.user.id,
            nikeName: this.user.nikeName
          });
          break;
        case 2:
          this.$message({
            message: "需开发组件！",
            type: "error",
            offset: 120,
            duration: 2000
          });
          break;
        case 4:
          this.$confirm("此操作将永久注销该账号, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.$postHttp("/mob/user/cancellation", {
                id: this.user.id
              }).then(data => {
                if (data.code == 200) {
                  this.$message({
                    type: "success",
                    message: "注销成功!"
                  });
                  localStorage.removeItem("userInfo");
                  this.$router.push({
                    path: "/"
                  });
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
          break;
      }
    },
    updateUser(data) {
      this.$postHttp("/mob/user/updateUserInfo", data).then(data => {
        if (data.code == 200) {
          this.$message({
            message: "修改昵称成功！",
            type: "success",
            offset: 120,
            duration: 2000
          });
          this.getUserInfo();
        }
      });
    },
    getUserInfo() {
      this.$getHttp("/mob/login/getUserInfoByPhone", {
        phone: this.user.phone
      }).then(data => {
        if (data.code == 200) {
          localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
        }
      });
    },
    //删除房源
    delHouse() {
      let delList = [];
      this.houseList.forEach(e => {
        if (e.choose) {
          delList.push(e.id);
        }
      });
      if (delList.length > 0) {
        this.$confirm("此操作将删除选中的房源, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            // delList.forEach((e) =>{
            this.$postHttp("/mob/user/delHouseInfo", {
              ids: delList.join(",")
            }).then(data => {
              if (data.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            });
            // })
            setTimeout(() => {
              this.initgetHouseInfo();
            }, 500);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      }
    },
    choosehouse(id) {
      this.houseList.forEach(e => {
        if (e.id == id) {
          e.choose = !e.choose;
        }
      });
    },
    updatPwd() {
      if (this.onepwd.trim() == this.twopwd.trim()) {
        this.$postHttp("/mob/login/updatePassByPass", {
          id: this.user.id,
          password: this.twopwd.trim(),
          oldPassword: this.oldpwd.trim()
        }).then(data => {
          if (data.code == 200 && data.success) {
            this.$message({
              message: "密码修改成功！",
              type: "success",
              offset: 120,
              duration: 2000
            });
          } else {
            this.$message({
              message: data.msg,
              type: "error",
              offset: 120,
              duration: 2000
            });
          }
        });
      } else {
        this.$message({
          message: "2次新密码不一致！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    houseClick(index) {
      this.houseindex = index;
      this.housepage.pageNo = 1;
      // 1    3    2
      // 全部 新车  二手车
      this.getMoreData();

      return;
      switch (index) {
        case 1:
          delete this.housepage.newOld;
          delete this.housepage.transactionType;
          break;
        case 2:
          this.housepage.newOld = 2;
          this.housepage.transactionType = 2;
          break;
        case 3:
          this.housepage.newOld = 1;
          this.housepage.transactionType = 2;
          break;
        case 4:
          delete this.housepage.newOld;
          this.housepage.transactionType = 1;
          break;
      }
      this.getHouseInfo();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$postHttp("/mob/user/updateUserInfo", {
        id: this.user.id,
        image: this.imgurl + res.attach.attachPath
      }).then(data => {
        if (data.code == 200) {
          this.user.image = this.imgurl + res.attach.attachPath;
          this.$message({
            message: "修改头像成功！",
            type: "success",
            offset: 120,
            duration: 2000
          });
          this.getUserInfo();
        }
      });
    },
    houseCurrentChange(e) {
      this.housepage.pageNo = e;
      this.getMoreData();
    },
    housecompile(type) {
      this.compilestate = type;
    },
    initgetHouseInfo() {
      this.housepage.pageNo = 1;
      this.getHouseInfo();
    },
    details(item) {
      this.openUrl({
        path: "/index/newSourceDetails",
        query: {
          id: item.id
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.houselist {
  width: 936px;
  // height: 820px;

  border: 1px solid #e0e0e0;
  border-radius: 10px;
  vertical-align: top;
  display: inline-block;

  .h1 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #333333;
  }

  .title {
    display: flex;
    padding: 25px 34px;
    color: #333333;
    font-size: 20px;
    align-items: center;
    border-bottom: #e0e0e0 1px solid;
    justify-content: space-between;
  }

  .ttext {
    margin-right: 60px;
    cursor: pointer;
  }

  .xttext {
    color: #64b6a8;
    font-size: 26px;
    margin-right: 54px;
    cursor: pointer;
  }

  .house {
    width: 100%;
    // height: 630px;
    padding-bottom: 60px;

    .houseview {
      height: 250px;
      width: 100%;
      height: 218px;
      padding: 32px;
      box-sizing: border-box;
      display: flex;
    }
  }
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.nameList {
  width: 460px;
  display: flex;
  flex-direction: column;
  padding-left: 14px;
  justify-content: space-between;
  cursor: pointer;

  .t_1 {
    font-size: 22px;
    padding-bottom: 12px;
  }

  .t_2 {
    font-size: 18px;
    color: #666666;
    margin-top: 12px;
  }

  .t_4 {
    font-size: 18px;
    color: #666666;

    .t_4_img {
      width: 31px;
      height: 31px;
    }

    div {
      display: inline-block;
      //width: 90px;
      padding: 0px 5px;
      height: 30px;
      background: #ffffff;
      border: 1px solid #64b6a8;
      border-radius: 4px;
      text-align: center;
      line-height: 30px;
      margin-left: 24px;
      color: #64b6a8;
    }
  }
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;

  .bianji {
    padding-bottom: 65px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;

    .ming {
      width: 876px;
      height: 56px;
      line-height: 56px;
      font-size: 20px;
      background: #f2f2f2;
      text-indent: 23px;
      margin-left: 32px;
      margin-top: 24px;
    }

    .lei {
      margin-top: 40px;

      .p {
        display: inline-block;
        vertical-align: unset;
        width: 100px;
        font-size: 20px;
        text-align: right;
        margin-left: 210px;
        margin-right: 70px;
        font-weight: 600;
      }

      .el-input {
        width: 220px;
        font-size: 18px;

        /deep/.el-input__inner {
          border: 0;
          color: #333;
          border-bottom: 1px solid #e0e0e0;
          box-sizing: content-box;
          padding-bottom: 15px;
        }
      }

      .div {
        display: inline-block;
        margin-left: 40px;
        font-size: 20px;
        color: #2264d2;
        cursor: pointer;
      }
    }

    .wenben {
      width: 835px;
      margin-left: 52px;
      margin-top: 40px;

      h4 {
        font-size: 20px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 20px;
      }

      p {
        font-size: 20px;
        line-height: 45px;
      }
    }

    .but {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background: #64b6a8;
      border-radius: 5px;
      color: #fff;
      text-align: center;
      font-size: 19px;
      cursor: pointer;
      margin-left: 395px;
      margin-top: 40px;
    }
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

.avatar-uploader {
  display: inline-block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #e0e0e0;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/deep/.el-input__inner {
  border-radius: 20px;
  border: #64b6a8 1px solid;
  color: #64b6a8;
}

/deep/.el-dialog__body {
  padding: 0px;
}

/deep/.el-dialog {
  border-radius: 20px;
}

.house {
  width: 100%;
  // height: 630px;
  padding: 0 0 30px 0;

  .houseview {
    position: relative;
    width: 100%;
    height: 218px;
    padding: 32px;
    box-sizing: border-box;
    display: flex;

    img {
      width: 230px;
      height: 154px;
    }
  }
}
</style>
